//class类方式创建一个购物车对象
class Shoppingcar {
    constructor(shelves, gowuche, goodlist) {
        this.shelves = shelves
        this.gowuche = gowuche
        this.goodlist = goodlist
        //调用函数方法
        this.shelvesrender()
        this.addcar()
        this.event()
        //创造购物车下的商品信息列表，当商品加入购物车时，实际上是传递对象数据到这个数组中了
        this.buylist = []
        this.nums = 0
    }
    //渲染左侧物品栏
    shelvesrender() {
        //遍历和模板字符串方式渲染，创建一个标签，插入到物品栏标签里，将内容渲染到新标签中
        for (var i = 0; i < this.goodlist.length; i++) {
            let figure = document.createElement('figure')
            figure.innerHTML = ` <img src="${this.goodlist[i].address}" alt="">
                <figcaption class="name">${this.goodlist[i].name}</figcaption>
                <figcaption>${this.goodlist[i].price}</figcaption>
                <button class='btn'>加入购物车</button>
                 `
            this.shelves.appendChild(figure)
        }
    }

    gowucherender() {
        // console.log(this.buylist);
        //保存一个总价变量，初始值为0
        this.nums = 0
        //保存一个商品总数变量，初始值为0
        let zongji = 0
        let goods = document.getElementsByClassName('goods')[0]
        //刚开始购物车是空的
        goods.innerHTML = ''
        for (let i = 0; i < this.buylist.length; i++) {
            //遍历和模板字符串方式渲染，创建一个单个商品标签，把它插入到购物车goods标签里，将内容渲染到新标签中
            let singlegoods = document.createElement('div')
            singlegoods.innerHTML = `<div class='good'>
            <img src="${this.buylist[i].address}" alt="">
                <span class="name">${this.buylist[i].name}</span>
                <span>${this.buylist[i].price}</span>
                <button class='reduce'>-</button>  
                <span class="num">${this.buylist[i].num}</span>
                <button class='plus'>+</button>
                <button class='dele'>删除收藏</button> 
                <div class="xiaoji">小记：${this.buylist[i].num * this.buylist[i].price}</div>
                </div> `
            //单类商品的总价等于数量*价格
            goods.appendChild(singlegoods)
            //商品总量等于不同商品数量累加
            zongji += this.buylist[i].num
            //总价为单类商品的小计累加
            this.nums = this.buylist[i].num * this.buylist[i].price + this.nums

        }
        this.event()
        //获取总价标签，动态渲染总价数字
        document.querySelector('.zongjia').innerHTML = '总计：' + this.nums
        //获取购物车顶部购物车标签，动态渲染商品总量到数字位置
        document.querySelector('h3').innerHTML = `<span>购物车(${zongji})</span>`
    }
    //判断购物车情况，决定商品是否重复，重复则商品内num数量加一，否则添加该商品到购物车列表里
    judge(singlegoods) {
        // console.log(singlegoods);
        if (this.buylist.indexOf(singlegoods) == -1) {
            this.buylist.push(singlegoods)
        }
        else {
            for (let i = 0; i < this.buylist.length; i++) {
                if (this.buylist[i].name == singlegoods.name) {
                    this.buylist[i].num++
                }
            }
        }

    }

    // 添加到购物车
    addcar() {
        let buts = document.getElementsByClassName('btn')
        // console.log('buts');
        for (let i = 0; i < buts.length; i++) {
            buts[i].onclick = () => {
                // console.log('1111111111');
                //点击“加入购物车”按钮后，先调用判断方法，再调用渲染方法
                this.judge(this.goodlist[i])
                //每加购一次商品，都重新渲染了一次购物车
                this.gowucherender()
            }
        }

    }
    //点击事件

    event() {
        //购物车中“加”，“减”，“删除”等按钮都需要绑定点击事件，都需要先获取到按钮；而加入到购物车中的每个商品都有这三个按钮，加购一次实际上是将一个商品信息再放入一次，所以相应的按钮数量是多个，以className方式获取到的是按钮的伪数组
        let pluss = document.getElementsByClassName('plus')
        let reduces = document.getElementsByClassName('reduce')
        let deles = document.getElementsByClassName('dele')

        for (let i = 0; i < pluss.length; i++) {
            pluss[i].onclick = () => {
                // console.log('22222');
                //点击“+”，我们仅让商品对象里的num属性++，并再渲染一次购物车
                this.buylist[i].num++
                this.gowucherender()
            }
        }
        for (let i = 0; i < deles.length; i++) {
            deles[i].onclick = () => {
                // console.log('33333');
                 //点击“删除收藏”，我们对商品列表里本商品的数据进行截取，并再渲染一次购物车
                this.buylist.splice(i, 1)
                this.gowucherender()
            }
        }
        for (let i = 0; i < reduces.length; i++) {
            reduces[i].onclick = () => {
                // console.log('555555');
                 //点击“-”，如果商品对象里的num数量是1，实际上执行的就是删除商品，并再渲染一次购物车；如果大于等于2，我们仅让商品对象里的num属性--，并再渲染一次购物车
                if (this.buylist[i].num < 2) {
                    this.buylist.splice(i, 1)
                } else {
                    this.buylist[i].num--
                }
                this.gowucherender()
            }
        }

    }


}

//获取到左右两块商品区域和购物车区域，创建商品的信息列表，以数组的形式保存每一个商品对象
let shelves = document.querySelector('.shelves')
let gowuche = document.querySelector('.gowuche')
let goodlist = [
    { id: 1, name: '高级办公椅', price: 10000, address: './imgs/01.gif', num: 1 },
    { id: 2, name: '高级按摩椅', price: 1000, address: './imgs/02.gif', num: 1 },
    { id: 3, name: '高级电动按摩椅', price: 100, address: './imgs/03.gif', num: 1 },
    { id: 4, name: '电动按摩椅', price: 10, address: './imgs/04.gif', num: 1 },
    { id: 5, name: '老板椅', price: 20000, address: './imgs/05.gif', num: 1 },
    { id: 6, name: '办公桌', price: 50000, address: './imgs/06.gif', num: 1 },
    { id: 7, name: '可升降办公椅', price: 2000, address: './imgs/07.gif', num: 1 },
    { id: 8, name: '可升降办公桌', price: 5000, address: './imgs/08.gif', num: 1 },
]
//new一个实例对象，将获取到的内容以参数形式传入构造函数中
let shoppingcar = new Shoppingcar(shelves, gowuche, goodlist)